<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>pixijs</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    canvas {
      background: #eee;
    }
  </style>
</head>
<body>
  <!-- http://localhost:8989/pixijs/demo_1.html -->
  <canvas id="canvas"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
  <script>
	  // let type = 'WebGL'
	  // if(!PIXI.utils.isWebGLSupported()) type = 'canvas'
	  // PIXI.utils.sayHello(type)

    const canvas = document.getElementById('canvas');

    const app = new PIXI.Application({
      view: canvas,
      width: window.innerWidth,
      height: window.innerHeight,
    });

    const texture = PIXI.Texture.from('../mario/assets/Mario/stop.png');
    const img = new PIXI.Sprite(texture);
    img.x = app.renderer.width / 2
    img.y = app.renderer.height / 2

    img.anchor.x = 0.5;
    img.anchor.y = 0.5;

    app.stage.addChild(img);

    app.ticker.add(() => {
      img.rotation += 0.01;
    });
  </script>
</body>

</html>